import React, { Component } from 'react'
import { observer } from 'mobx-react/custom'
import { Tabs } from 'antd-mobile'
import ProjectVM from 'cvm/projectList/projectList'
import './projectList.less'

@observer
class projectList extends Component {
  constructor (props) {
    super(props)
    window.document.title = '项目列表'
    this.vm = new ProjectVM(props)
  }
  renderContent = () => (
    <div>
      {
        this.vm.currentView.length > 0 ? this.vm.currentView.map((item) => {
          return (
            <div className='project-detail' key={item.Id} onClick={() => { this.vm.handleToDetail(item.Id, this.vm.indexCurrent) }}>
              <p className='company'>{item.CompanyName}</p>
              <div className='flex-wrap user'>
                <p className='flex-1'>联系人：{item.LinkName}</p>
                <p className='flex-1'>业绩总额：<span className='achievement'>{item.BonsTotal.toFixed(2)}</span></p>
              </div>
              <div className='flex-wrap phone'>
                <p className='flex-1'>手机号：{item.LinkPhone}</p>
                <p className='flex-1'>项目佣金：<span className='commission'>{item.BonsReward.toFixed(2)}</span></p>
              </div>
            </div>
          )
        }) : this.vm.projectLists && <div className='none-record'>
          <img src={require('../../images/none-project.png')} />
          <p>暂无项目</p>
        </div>
      }
    </div>
  )

  render () {
    const tabs = [
      { title: `已确认(${this.vm.confirmList.length})` },
      { title: `待确认(${this.vm.applyList.length})` },
      { title: `洽谈中(${this.vm.qiatanList.length})` },
      { title: `已拒绝(${this.vm.refuseList.length})` }
    ]
    return (
      <div id='project-list' className='list-project'>
        <Tabs
          tabs={tabs}
          swipeable={false}
          renderTabBar={props => <Tabs.DefaultTabBar
            {...props}
            page={3}
            activeTab={this.vm.indexCurrent}
            tabBarActiveTextColor='#1AAD19'
            tabBarInactiveTextColor='#353535'
            />
          }
          onTabClick={(tabs, index) => {
            this.vm.handleTabs(tabs, index)
          }}
        >
          {this.renderContent()}
        </Tabs>
        <div className='fix-img'>
          <img src={require('../../images/add-img.png')} onClick={() => this.vm.handleAddProject('Password')} />
          <img src={require('../../images/user-center.png')} onClick={() => this.vm.handleToUserCenter('Password')} />
        </div>
      </div>
    )
  }
}

export default projectList
